<!-- home -->
<template>
    <div>
        <div class="baidumap" id="allmap"></div>
        <img src="@/images/yuan.png" alt="">

    </div>
</template>
<script>
import { addressAPI } from '@/api/system/map';
import circle from '@/images/yuan.png'
export default {
    data() {
        return {
            opts: {
                width: 250,     // 信息窗口宽度    
                height: 200,     // 信息窗口高度    
                // title: "莱尼尔科技"  // 信息窗口标题   
            },
            obj: {
                id: '',
                Name: '',
                address: '',
                state: '',
                time: '',
                manager: ''

            }


        };
    },
    mounted() {
        this.baiduMap();

    },
    methods: {
        baiduMap() {
            // AnimationMap.prototype.AnimationPoint=function(){
            //         $('.BMap_Marker div').append('<span class="effectPoint"></span>')
            //         $('.effectPoint:even').appClass('effectPoint1')
            //         $('.effectPoint:odd').appClass('effectPoint2')

            //     }
            var that = this
            addressAPI().then(res => {
                // console.log(res);
                // 取出接口的数组
                var addres = res.data
                // AnimationMap.prototype.AnimationPoint=function(){
                //     $('.BMap_Marker div').append('<span class="effectPoint"></span>')
                //     $('.effectPoint:even').appClass('effectPoint1')
                //     $('.effectPoint:odd').appClass('effectPoint2')

                // }

                // 利用map函数把接口的地址组成新数组
                // var addreslist = addres.map(item =>
                //     item.deviceAddress
                // )


                var map = new BMap.Map('allmap'); // 创建地图实例
                map.centerAndZoom("青岛市", 12);
                map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
                map.addControl(new BMap.NavigationControl());
                map.addControl(new BMap.ScaleControl());
                map.addControl(new BMap.OverviewMapControl());
                map.addControl(new BMap.MapTypeControl());
                // map.setMapStyle({ style: 'midnight' }) //地图风格
                // 默认的地图样式  BMAP_SATELLITE_MAP是卫星
                // map.setMapType(BMAP_SATELLITE_MAP)
                map.clearOverlays();

                // 创建地址解析器实例     
                var myGeo = new BMap.Geocoder();
                var opt = this.opts
                // var icon = new BMap.Icon('@/assets/images/1.gif', new BMap.Size(45, 45), {
                //     // anchor: new BMap.Size(43, 38)
                // });//定义图标
                // 将地址解析结果显示在地图上，并调整地图视野  
                // addreslist.forEach(item => {
                //     // console.log(item);
                //     myGeo.getPoint(item, function (point) {
                //         if (point) {
                //             map.centerAndZoom(point, 16);
                //             var dd = new BMap.Marker(point)
                //             map.addOverlay(dd);

                //             var infoWindow = new BMap.InfoWindow("", opt);

                //             // var infoWindow = new BMap.InfoWindow("崂山大拇指广场", opt);
                //             dd.addEventListener('mouseover', function () {
                //                 this.openInfoWindow(infoWindow);
                //             });
                //             dd.addEventListener('mouseout', function () {
                //                 this.closeInfoWindow(infoWindow);
                //             });
                //             dd.addEventListener('click', function () {

                //             });
                //         }

                //     },
                //         "北京市");
                // })

                // ==========================
                addres.forEach(item => {

                    var oo = '<div style="width:300px;"><p style="font-size:16px;font-weight:bold;margin-top: 10px;color:#D07852">' +
                        item.deviceAddress +
                        '</p><p style="font-size:13px;margin: 5px 0;">负责人：' +
                        item.deviceManager +
                        '</p><p style="font-size:13px;margin: 5px 0;">设备名称：' +
                        item.deviceName +
                        '</p><p style="font-size:13px;margin: 5px 0;">设备编号：' +
                        item.deviceNo +
                        '</p><p style="font-size:13px;margin: 5px 0;">状态：' +
                        ('' + item.deviceState == 0 ? '正常' : '停止' + '</div>');
                    myGeo.getPoint(item.deviceAddress, function (point) {
                        if (point) {
                            map.centerAndZoom(point, 16);
                            // var waveLayer = new mapvgl.CircleLayer({
                            //     // 绘制带波纹扩散的圆
                            //     type: 'wave',
                            //     // 扩散半径，支持直接设置和回调两种形式
                            //     radius: r => 1.6 * r,
                            //     // 周期影响扩散速度，越小越快
                            //     duration: 1 / 3,
                            //     // 拖尾影响波纹数，越大越多
                            //     trail: 4
                            // });
                            var icon = new BMap.Icon(require("@/images/1.gif"), new BMap.Size(20, 20), {
                                // anchor: new BMap.Size(43, 38)
                            });//定义图标

                            var dd = new BMap.Marker(point,
                                {
                                    icon: icon
                                }
                            )
                            console.log(dd);
                            map.addOverlay(dd);
                            dd.setAnimation(BMAP_ANIMATION_DROP);//跳动的动画

                            var infoWindow = new BMap.InfoWindow(oo, opt);

                            // var infoWindow = new BMap.InfoWindow("崂山大拇指广场", opt);
                            dd.addEventListener('mouseover', function () {
                                this.openInfoWindow(infoWindow);
                            });
                            dd.addEventListener('mouseout', function () {
                                this.closeInfoWindow(infoWindow);
                            });
                            dd.addEventListener('click', function () {

                                that.$router.push(item.deviceRouter)



                            });

                        }

                    },
                        "北京市");


                })
            })



        },


    }
};
</script>
<style>
.baidumap {
    width: 100%;
    height: 900px;
}

/* .effectPoint{
    width: 10px;
    height: 10px;
    background: red;
    position: absolute;
    z-index: 2;
    border-radius: 50%;
    left: 8px;
    top: 8px;
}
@keyframes move {
    from{
        transform: scale(0);
    }
    to{
        transform: scale(3.0);
        opacity: 0;
    }
}
.effectPoint1{
    animation: move 2s infinite linear;
}
.effectPoint2{
    animation: move 5s infinite linear;
} */
/* 去除百度地图版权那行字 和 百度logo */
/* .baidumap > .BMap_cpyCtrl {
	    display: none !important;
	}
	.baidumap > .anchorBL {
	    display: none !important;
	} */
.BMap_Marker {
    margin: -100px auto;
    width: 20px;
    height: 20px;
    /* background-image: url('~@/images/1.gif'); */
    /* background-color: #8f9dee; */
    border-radius: 50%;
    /* box-shadow: 0 0 10px rgba(0, 0, 0, .3) inset; */
    -webkit-animation-name: 'ripple';
    /*动画属性名，也就是我们前面keyframes定义的动画名*/
    -webkit-animation-duration: 2s;
    /*动画持续时间*/
    -webkit-animation-timing-function: ease;
    /*动画频率，和transition-timing-function是一样的*/
    -webkit-animation-delay: 0s;
    /*动画延迟时间*/
    -webkit-animation-iteration-count: infinite;
    /*定义循环资料，infinite为无限次*/
    -webkit-animation-direction: alternate;
    /* 定义动画方式 */
}


 @keyframes ripple {
    /* 0% {

        opacity: 0.9;
        width: 5px;
        height: 5px;
    }

    100% {

        opacity: 0.2;
        width: 30px;
        height: 30px;
    } */
    0% {
	    transform: scale(0.1); /*开始为原始大小*/
	  }
	 
	  75% {
	    transform: scale(1);
        
	  }


} 


</style>